<template>
  <div class="login-container">
      <!-- 配置 Form 表单验证：
      1、 必须给 el-form 组件绑定 model 为表单数据对象
      2、 给需要验证的表单项 el-form-item 绑定 prop 属性
             注意： prop 属性需要指定表单对象中的数据名称
      3、 通过 el-form 组件的 rules 属性配置验证规则

      手动触发表单验证：
      1、 给 el-form 设置 ref 属性，起个名字（名字随便起，但是不要出现中文或者重复即可）
      2、 通过 ref 获取 el-form 组件，并调用组件的 validate 进行验证 -->
    <el-form
      class="login-form"
      ref="login-form"
      :model="user"
      :rules="ruleForm"
    >
      <el-form-item class="login-logo">
        <svg width="79" height="27" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M78.848 12.644v3.133H61.736l-.576 2.014h16.76v1.828l-1.669 7.233H59.375V23.45h13.581l.522-2.259H56.594v-1.7l1.063-3.715h-3.845v-3.133h25.036zM41.42 13.843v1.934h10.507v3.401H41.42v7.674h-4.08v-7.674H26.891v-3.401H37.34v-1.934h4.08zM18.104.85c-.101 7.245-.24 11.578-1.329 14.927h8.26v3.401h-9.898c-1.58 2.383-4.039 4.58-7.89 7.674H.968l.791-.625c3.87-3.053 6.53-5.151 8.334-7.049H0v-3.401h12.509c1.397-3.018 1.505-7.325 1.609-14.927h3.987zm3.06 20.029l3.867 5.973h-4.81l-3.867-5.973h4.81zm26.895 0l3.867 5.973h-4.811l-3.867-5.973h4.811zm-12.492 0l-3.866 5.973H26.89l3.866-5.973h4.811zM31.374 0l3.771 1.7h15.391v3.958c-1.14.987-2.862 2.413-5.857 3.91a89.124 89.124 0 007.248 1.468v3.63c-5.362-.847-9.447-1.862-12.608-2.907-3.2 1.074-7.255 2.09-12.428 2.904v-3.628a90.857 90.857 0 007.106-1.425c-2.22-1.1-3.65-2.124-4.73-2.898-.165-.118-1.678-1.256-1.678-1.256L31.374 0zM2.314 8.125l8.869 1.226v3.797L2.315 11.92V8.125zM77.365 1.7v8.93H55.295V1.7h22.07zm-31.91 3.4h-12.12c1.39.874 3.292 1.886 6.1 2.896 2.814-1.01 4.692-2.023 6.02-2.895zm27.83 0H59.375V7.23h13.91V5.102zm-70.97-3.4l8.869 1.226v3.797L2.315 5.497V1.7z" fill="#fff"></path></svg>
      </el-form-item>
      <el-form-item prop="mobile">
        <el-input
          v-model="user.mobile"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          v-model="user.code"
          placeholder="请输入验证码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="user.agree"><span :class="user.agree ? 'agree' : ''">我已阅读并同意用户协议和隐私条款</span></el-checkbox>
      </el-form-item>
      <el-button
        class="login-btn"
        type="primary"
        @click="onLogin"
        :loading="loginLoading"
      >{{ message }}</el-button>
    </el-form>
  </div>
</template>

<script>
import { login } from '@/api/user'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      message: '登录',
      user: {
        mobile: '13911111111', // 手机号
        code: '246810', // 验证码
        agree: false // 是否同意协议的选中状态(当需要校验规则的时候，必须写在user中)
      },
      // 是否同意协议的选中状态
      // checked: false,
      // 登录的 loading 状态
      loginLoading: false,
      ruleForm: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'change' },
          { pattern: /^\d{6}$/, message: '请输入正确的验证码格式' }
        ],
        agree: [
          {
            // 自定义校验规则
            // 验证通过： callback()
            // 验证失败： callback(new Error('失败时显示的提示信息'))
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              } else {
                // if (this.ruleForm.checkPass !== '') {
                //   this.$refs.ruleForm.validateField('checkPass')
                // }
                callback(new Error('请同意用户协议'))
              }
            },
            // message: '请同意用户协议',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onLogin () {
      this.$refs['login-form'].validate(valid => {
        if (!valid) {
          return false
        } else {
          this.login()
        }
      })
    },
    login () {
      this.loginLoading = true
      this.message = '登录中...'
      login(this.user).then(res => { // 登录成功
        this.loginLoading = false

        // 将登录用户的token存储到本地存储中，方便后续来获取(JSON.stringify会把对象转换成字符串进行存储，我们登录之后，跳转到首页时，需要拿到当前登录用户的token值，即window.localStorage.getItem('admin-user')，而拿到的值是字符串，我们拿到字符串的同时还需要获取字符串中的token的值，所以还需要在@/api/user.js中进行操作)
        window.localStorage.setItem('admin-user', JSON.stringify(res.data.data))

        this.message = '登录'
        this.$router.push('/')
      }).catch(err => { // 登录失败
        console.log(err)
        this.$message.error('登录失败，手机号或验证码错误')
        this.loginLoading = false
        this.message = '登录'
      })
    }
  }
}
</script>

<style scoped lang="less">
  .login-container {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url("../../assets/image/login/login_bg.jpg") no-repeat;
      background-size: cover;
    .login-form {
      background: rgba(0,0,0,.5);
      padding: 40px;
      border-radius: 3px;
      min-width: 300px;
      .login-logo {
        text-align: center;
        margin-bottom: 10px;
        font-size: 40px;
      }
      /deep/ .el-input__inner {
        background: unset;
        color: #fff;
      }
      .agree {
        color: #409eff;
      }
      /deep/ .el-checkbox__label {
        color: #fff;
      }
      .login-btn {
        width: 100%;
      }
    }
  }
</style>
